<html> 
  <head> 
    <title>SpriteTest</title> 
    <script type="text/javascript" src="../jquery.js"></script>
    <script type="text/javascript" src="../math/point2d.js"></script>
    <script type="text/javascript" src="../math/vector2d.js"></script>
    <script type="text/javascript" src="../draw/sprite.js"></script>
    <script type="text/javascript">
        var spt;
        var context;
        var moveV = 160;
        var curPos = new Point2D( 100, 100);
        var targetPos = new Point2D( 100, 100);
        var moveVec;
        var state = "stand1";
        
        function onTimer() {
            var tickTime = 0.03;
            
            context.clearRect( 0, 0, 1024, 600);
            context.beginPath();
            context.moveTo( curPos.x, curPos.y);
            context.lineTo( targetPos.x, targetPos.y);
            context.stroke();
            
            if ( state == "run") {
                var pos = spt.getPos();
                var v = moveV * tickTime;
                var xv = v * moveVec.x;
                var yv = v * moveVec.y;
                pos.x += xv;
                pos.y += yv;
                                               
                var toStand = false;
                if ( moveVec.x >= 0 && pos.x >= targetPos.x)
                    toStand = true;
                else if ( moveVec.x < 0 && pos.x <= targetPos.x)
                    toStand = true;
                
                if ( moveVec.y >= 0 && pos.y >= targetPos.y)
                    toStand = true;
                else if ( moveVec.y < 0 && pos.y <= targetPos.y)
                    toStand = true;
                
                if ( toStand) {
                    spt.setAction( "stand1");
                    state = "stand1";
                    spt.setPos( targetPos.x, targetPos.y);
                }
                else {
                    spt.setPos( pos.x, pos.y);
                }
            }
            
            
            spt.update( tickTime);
            var pos = spt.getPos();
    		spt.draw( context, pos.x, pos.y);
    	}
    	
     	$(document).ready( function() {
     	    var elem = $("#myCanvas")[0];
    		if ( !elem || !elem.getContext)
    			return;
    		context = elem.getContext('2d');
    		
    		spt = new Sprite( "/gems/sprite/artes/hehuan/");
    		spt.setPos( targetPos.x, targetPos.y);
    		setInterval( "onTimer()", 33);
    		
    		    		
    		$("#myCanvas").click( function( event) {
    		    curPos.x = targetPos.x;
    		    curPos.y = targetPos.y;
    			targetPos.x = event.pageX;
    			targetPos.y = event.pageY;
    			moveVec = targetPos.sub( spt.getPos());
    			moveVec = moveVec.normalize();
    			state = "run";
    			spt.setDrtByVector( moveVec.x, moveVec.y, "run");
    		});
    		
    	});
		</script> 
  </head> 
  <body> 
    <canvas id="myCanvas" width="1024" height="600">
    	Your browser does not have support for Canvas.
    </canvas>
  </body> 
</html> 